<template>
<div class="page">
  <!-- toast -->
  <div id="toast" style="display: none;">
  <div class="weui-mask_transparent"></div>
  <div class="weui-toast">
      <p class="weui-toast__content" style="color: white;">已点过赞</p>
  </div>
  </div>
  <div class="nav">
    <div class="navList">
      <div class="chooseBtn">
        <i class="iconfont icon-category"></i>
        <!-- <i class="iconfont icon-close"></i> -->
      </div>
      <p>亲子公号查找</p>
      <div class="closeBtn">
        <i class="iconfont icon-close" style="display: none;"></i>
      </div>
    </div>
  </div>
  <div class="placeHolder">
  </div>
  <div style="">
    <!-- <router-link class="back" to="/" v-on:click="clickBack">
      返回
    </router-link> -->
    <!-- <div class="toast" style="display:none;">
      此公号您已点过赞
    </div> -->
    <!-- <div class="back" v-on:click="clickBack">
      返回
    </div> -->
    <!-- <home style="display: none;" id="home"></home> -->
    <div class="goTop">
      <i class="iconfont icon-up"></i>
    </div>
    <!-- public -->
    <div class="publicBox" v-for="item of this.items">
      <div class="flex">
        <span class="img" v-on:click="clickPb(item)">
          <img v-bind:src="item.pb_img" alt="">
        </span>
        <span class="public" v-on:click="clickPb(item)">
          <h5>{{item.pb_name}}</h5>
          <p>{{item.pb_script}}</p>
        </span>
        <div class="cute" v-on:click="cute(item)">
          <p>{{item.pb_cute_num}}</p>
          <i class="iconfont icon-zan"></i>
        </div>
      </div>
    </div>
    <div class="placeHolder">
    </div>
  </div>
</div>
</template>

<script>
import $ from 'jquery';
import data from '../data/data.json';
// import {track} from '../statistics/mongo';
// import weui from 'weui';
import home from './Home.vue';

// console.log(getData);
export default {
  data() {
    const user = JSON.parse(localStorage.getItem('ict48-user-info'));
    let chooseList = localStorage.getItem('choose');
    if (localStorage.getItem('choose')) {
      chooseList = localStorage.getItem('choose').split(',').sort(() =>
        0.5 - Math.random());
    } else {
      // 初始默认 随机选择
      localStorage.setItem('choose', [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].sort(() =>
       0.5 - Math.random()).splice(0, 2));
      chooseList = localStorage.getItem('choose')
    }

    // 数据字典
    const dict = {
      '1': 'nurse',
      '2': 'composite',
      '3': 'relation',
      '4': 'education',
      '5': 'huiben',
      '6': 'composite',
      '7': 'assistFood',
      '8': 'education',
      '9': 'nurse',
      '10': 'huiben',
      '11': 'relation'
    }
    // init 初始化cuteNum
    let locData = data.items;
    if (localStorage.getItem('cuteNum5')) {
      locData = JSON.parse(window.localStorage.getItem('cuteNum5'));
      console.log('locData', locData);
    }
    // console.log('localdata', locData);
    // 筛选选择类型数据
    let viewData = locData.filter((item) => {
      let isInChoose = false;

      for (let i = 0; i < chooseList.length; i++) {
        if (item.tag === dict[chooseList[i]]) {
          isInChoose = true;
          break;
        }
      }

      return isInChoose
    });

    return {
      items: viewData,
      totalData: locData,
      user,
      chooseList
    };
  },

  /**
   * updated
   */
  updated() {
  },
  /**
   * created
   */
  created() {
    for (var i = 0; i < this.items.sort(() => 0.5 - Math.random()).length; i++) {
    }
  },
  /**
   * mounted
   */
  mounted() {
    window.scrollBy(0, -10000);
    // 返回顶部
    $('.goTop').click(() =>
      window.scrollBy(0, -10000)
    );
    // 点赞
    // $('.cute').click(() =>
    //   console.log($(this).index())
    // );
    //
    // $('.cute').bind('click', () => )
    // 点击选择
    $('.chooseBtn').click(() => {
      $('#home').toggle();
      $('.icon-close').toggle();
      // if ($('.closeBtn').css('display') === 'none') {
      //   $('.closeBtn').show();
      // }
    }
  );
    $('.closeBtn').click(() => {
      $('#home').hide();
      $('.icon-close').hide();
    }
  );
  },

  methods: {
    clickChoose() {
    },
    clickPb(pb) {
      // statisics 点击公号统计
      // track('click_Pb', {choosePb: pb});
      window.location.href = pb.redirect;
    },
    clickBack() {
      // statisics 返回首页统计
      // track('click_goback', {});
      this.$router.push('/');
    },
    cute(item) {
      if (item.isChoose === 'Y') {
        // $('.toast').show().hide(1000);
        // alert('此公号您已点过赞!');
        $('#toast').show(0);
        $('#toast').fadeOut(1500);
        return;
      }
      // statisics 点赞统计
      // track('click_cute', {chooseCute: item});
      item.pb_cute_num = parseInt(item.pb_cute_num) + 1;
      // let ret = this.totalData.find(function(ele, index, array) {
      //   let flag = false;
      //   if (ele.pb_id === item.pb_id) {
      //     flag = true
      //   }
      //   return flag;
      // })

      // if (ret) {
      //   ret.pb_cute_num = item.pb_cute_num
      // } else {
      //   // do nothing
      // }
      for (let i = 0; i < this.totalData.length; i++) {
        if (this.totalData[i].pb_id === item.pb_id) {
          this.totalData[i].pb_cute_num = item.pb_cute_num;
          this.totalData[i].isChoose = 'Y';
        }
      }
      window.localStorage.setItem('cuteNum5', JSON.stringify(this.totalData));
    }
  },

  components: {
    home
  }
}
</script>

<style lang="scss" scoped>
.nav  {
  // opacity: 0.6;
  // width: 3rem;
  width: 100%;
  z-index: 998;
  height: 3rem;
  line-height: 3rem;
  // display: block;
  position: fixed;
  // left: 0.5rem;
  // top: 0.5rem;
  background: rgba(245,245,245,0.9);
  border-radius: 2px;
  // color: white;
  font-size: 12px;
  p {
    flex: 5;
    text-align: center;
  }
  .chooseBtn {
    flex: 1;
    height: 3rem;
    width: 3rem;
  }
  .closeBtn {
    flex: 1;
    height: 3rem;
    width: 3rem;
  }
  .icon-category {
    position: absolute;
    left: 1rem;
  }
  .icon-close {
    position: absolute;
    right: 1rem;
  }
  i {
    font-size: 22px;
    color: rgba(150,150,150,1);
  }
}
.navList {
  display: flex;
}
.weui-toast {
  height: 7.6em;
  line-height: 7.6rem;
}
.toast {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  z-index: 999;
  margin: 0 0;
  width: 5rem;
  position: relative;
}
.placeHolder {
    // background-color: #f7bbba;
    // background-color: #ffe8ee;
    height: 3rem;
}
.page {
    // position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50rem;
    padding-bottom: 3rem;
    z-index: 1;
    // background-color: #ffe8ee;
    // background-color: #f7bbba;
    // background-color: #FBAC3B;
    p,
    span {
        font-family: Helvetica Neue,Tahoma,Arial;
    }
}
.line {
    opacity: 0.5;
    height: 1rem;
    margin: 0 0.5rem;
    // border-top-color: black;
    border-top-color: white;
    border-top-style: solid;
    // border-radius: 15px;
    border-width: 1px;
    margin-top: 1rem;
}
.back {
    opacity: 0.6;
    width: 3rem;
    z-index: 100;
    height: 3rem;
    line-height: 3rem;
    display: block;
    position: fixed;
    right: 0.5rem;
    bottom: 0.5rem;
    background: rgba(235,235,235,0.9);
    border-radius: 2px;
    // color: white;
    font-size: 12px;
}
.goTop {
    opacity: 0.6;
    width: 3rem;
    z-index: 100;
    height: 3rem;
    line-height: 3rem;
    display: block;
    position: fixed;
    right: 0.5rem;
    // bottom: 4rem;
    bottom: 0.5rem;
    background: rgba(235,235,235,0.9);
    border-radius: 2px;
    // color: white;
    font-size: 12px;
}
.publicBox {
    font-size: 12px;
    text-align: left;
    // padding: 0.5rem;
    // margin: 0.8rem;
    color: white;
    display: flex;
    div {
        color: white;
    }
    h5 {
        font-weight: normal;
        font-size: 14px;
        // color: white;
        color: #5a5a5a;
        opacity: 1;
    }
    p {
        // font-weight:lighter;
        // color: white;
        color: #5a5a5a;
        opacity: 1;
    }
    .flex {
        display: flex;
        // margin: 0 0.5rem;
        margin:0.5rem 1rem;
        width: 100%;
        // border-bottom: 1px solid rgba(220, 143, 169, 0.25);
        // border-bottom: 1px solid rgba(235, 235, 235, 0.8);
        border: 1px solid rgba(235, 235, 235, 1);
    }
    .public {
        position: relative;
        top: 0.8rem;
        padding: 0.2rem;
        color: white;
        // opacity: 0.5;
        flex: 3;
    }
    .cute {
        flex: 1;
        text-align: center;
        padding-top: 1.5rem;
        p {
            color: rgba(188, 188, 188, 1);
            // color: rgba(220, 143, 169, 1);
        }
    }
    .icon-zan {
        // color: rgba(220, 143, 169, 1);
        color: rgba(188, 188, 188, 1);
    }
    .img {
        padding: 0.5rem;
        // padding-top: 1rem;
        // padding-left: 0.5rem;
        flex: 1;
        img {
            width: 4rem;
            position: relative;
            top: 0.1rem;
            border-style: solid;
            border-width: 0.3rem;
            // border-color: rgba(220, 143, 169, 0.15);
            border-color: rgba(188, 188, 188, 0.2);
        }
    }
}
</style>
